<template>
  <el-container>
    <div class="login-group">
      <div class="side">

      </div>
      <div class="main-group">
        <h3 class="title">登陆</h3>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="0" size="small">
          <el-form-item label="" prop="username">
            <el-input v-model="ruleForm.username" prefix-icon="fa fa-fw fa-user-circle" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="" prop="password">
            <el-input type="password" v-model="ruleForm.password" auto-complete="off"
                      prefix-icon="fa fa-fw fa-unlock-alt" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="" prop="code">
            <el-col span="17">
              <el-input v-model="ruleForm.code" auto-complete="off"
                        prefix-icon="fa fa-fw fa-braille" placeholder="验证码"></el-input>
            </el-col>
            <el-col span="6" :offset="1">
              <img :src="codeImg" class="codeImg" alt="" @click="getCodeImg">
            </el-col>
          </el-form-item>
          <el-form-item label="">
            <el-checkbox v-model="ruleForm.remember" false-label="false" true-label="true">记住密码</el-checkbox>
          </el-form-item>
          <el-form-item style="text-align: center">
            <el-button type="success" @click="submitForm('ruleForm')">登陆</el-button>
            <!--<el-button @click="resetForm('ruleForm')">重置</el-button>-->
          </el-form-item>
        </el-form>
      </div>
    </div>
  </el-container>
</template>

<script>
  export default {
    data() {
      return {
        codeImg: '',
        ruleForm: {
          username: '135k_跑腿',
          password: '123456',
          code: '123456',
          remember: false
        },
        rules: {
          username: [
            {required: true, message: '用户名不得为空', trigger: 'blur'},
          ],
          password: [
            {required: true, message: '密码不得为空', trigger: 'blur'},
          ],
          code: [
            {required: true, message: '验证码不得为空', trigger: 'blur'},
          ],
        }
      };
    },
    methods: {
      getCodeImg: function () {
        let _this = this;
        this.api.getCodeImg().then(null, function (data) {
          let result = data.data;
          _this.codeImg = result.url + '?refurbish=' + new Date().getTime();
        })
      },
      submitForm(formName) {
        let _this = this;
        // this.$refs[formName].validate((valid) => {
        // if (valid) {
        //   this.api.Login({
        //     account: this.ruleForm.username,
        //     password: this.ruleForm.password,
        //     code: this.ruleForm.code
        //   }).then(null, function (data) {
        //     let result = data.data;
        //     if(result.code == 1){
        //       _this.$message({
        //         showClose: true,
        //         message:result.msg,
        //         type: 'success',
        //         onClose:function () {
        //           localStorage.setItem(_this.constant.LOGIN_STATUS,true);
        //           _this.navToConsolePage();
        //         }
        //       });
        //     }else{
        //       _this.$message({
        //         showClose: true,
        //         message:result.msg,
        //         type: 'warning'
        //       });
        //     }
        //   });
        // } else {
        //   return false;
        // }
        // });

        localStorage.setItem(_this.constant.LOGIN_STATUS, true);
        _this.navToConsolePage();
      },
      navToConsolePage: function () {
        this.$router.push({
          name: 'Console',
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
    mounted: function () {
      if (localStorage.getItem(this.constant.LOGIN_STATUS)) {
        this.navToConsolePage();
      }
      this.getCodeImg();
    }
  }
</script>

<style scoped>

  .el-container {
    display: block;
    height: 100vh;
    background: url("../assets/resource/login/login-bg-image.jpg") no-repeat;
    background-size: cover;
    overflow: hidden;
  }

  .login-group {
    background: #FFFFFF;
    width: 800px;
    height: 600px;
    margin: 8% auto;
    box-shadow: 0 0 10px #000000;
    overflow: hidden;
    border-radius: 3px;
  }

  .side {
    height: 100%;
    width: 300px;
    background: url("../assets/resource/login/login-side-image.jpg") no-repeat;
    background-size: cover;
    float: left;
  }

  .main-group {
    width: 500px;
    float: left;
  }

  .title {
    font-size: 28px;
    text-align: center;
    margin: 120px 0 60px;
  }

  .el-form {
    width: 400px;
    margin: 50px auto;
  }

  .codeImg {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
    border-radius: 3px;
  }

</style>
